<template>
<div >
    <div class="base-template__content">
        <div  class="moon__title">{{title}}</div>
        <div  class="moon__img"></div>
        <div  class="moon__descriptionList" v-for="(item ,item_index) in sprops.descriptions" :key="item_index">
            {{item}}
        </div>
    </div>
    <div  class="table-parameter">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper">
            <div  class="new-content-title">2021年度</div>
            <div  class="new-content-line"  style="width: 94px;"></div>
        </div>
        <table  class="table-custom">
            <thead >
                <tr >
                    <th >参数</th>
                    <th style="width: 45px;">默认值</th>
                    <th >说明</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(item ,item_index) in sprops.request.parmars" :key="item_index" v-show="sprops.request.parmars">
                    <td >{{item.name}}</td>
                    <td >{{item.default}}</td>
                    <td style="align-items: center;">
                        {{item.description}}
                        <a-tooltip placement="bottom"  v-show="item.tooltip">
                            <template slot="title">
                                <span>{{item.tooltip}}</span>
                            </template>
                            <a-icon type="question-circle" :style="{ color: '#194485',width: '32px;' }"/>
                        </a-tooltip>
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-for="(item_children ,item_index_children) in sprops.request.children" :key="item_index_children" v-show=" sprops.request.children && item_children && item_children.parmars">
             <div style="font-size: 14px;font-weight: 600;padding: 16px;">{{item_children.name}} 请求参数</div>
             <table  class="table-custom" >
            <thead >
                <tr >
                    <th >参数</th>
                    <th style="width: 45px;">默认值</th>
                    <th >说明</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(item ,item_index) in item_children.parmars" :key="item_index" v-show="item_children">
                    <td >{{item.name}}</td>
                    <td >{{item.default}}</td>
                    <td style="align-items: center;">
                        {{item.description}}
                        <a-tooltip placement="bottom"  v-show="item.tooltip">
                            <template slot="title">
                                <span>{{item.tooltip}}</span>
                            </template>
                            <a-icon type="question-circle" :style="{ color: '#194485',width: '32px;' }"/>
                        </a-tooltip>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>
        
    </div>
    <div  class="table-parameter">
        <div  class="line-dotted" ></div>
        <p >请求代码示例</p>
        <pre>
            <code class="language-javascript" v-for="(item ,item_index) in sprops.requestcodes" :key="item_index"  v-show="Array.isArray( sprops.requestcodes)">{{item}}</code>
            <code class="language-javascript"  v-show="!Array.isArray( sprops.requestcodes)">{{sprops.requestcodes}}</code>
        </pre>
    </div>
    <div  class="table-parameter" v-show="sprops.back">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper">
            <div  class="new-content-title">返回内容</div>
            <div  class="new-content-line"  style="width: 64px;"></div>
        </div>
        <table  class="table-custom">
            <thead >
                <tr >
                    <th >返回值</th>
                    <th >说明</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(item ,item_index) in sprops.back" :key="item_index">
                    <td >{{item.name}}</td>
                    <td >{{item.description}}</td>
                </tr>
            </tbody>
        </table>
    </div>
     <div  class="table-parameter">
        <div  class="line-dotted"></div>
        <p >返回代码示例</p>
        <pre>
            <code class="language-javascript">{{sprops.backcodes}}</code>
        </pre>
    </div>


    <div  class="table-parameter">
        <div  class="line-dotted"></div>
        <div   class="new-content-title-wrapper">
            <div  class="new-content-title">2020年度</div>
            <div  class="new-content-line"  style="width: 94px;"></div>
        </div>
        <table  class="table-custom">
            <thead >
                <tr >
                    <th >参数</th>
                    <th style="width: 45px;">默认值</th>
                    <th >说明</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(item ,item_index) in sprops.request.parmars" :key="item_index" v-show="sprops.request.parmars">
                    <td >{{item.name}}</td>
                    <td >{{item.default}}</td>
                    <td style="align-items: center;">
                        {{item.description}}
                        <a-tooltip placement="bottom"  v-show="item.tooltip">
                            <template slot="title">
                                <span>{{item.tooltip}}</span>
                            </template>
                            <a-icon type="question-circle" :style="{ color: '#194485',width: '32px;' }"/>
                        </a-tooltip>
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-for="(item_children ,item_index_children) in sprops.request.children" :key="item_index_children" v-show=" sprops.request.children && item_children && item_children.parmars">
             <div style="font-size: 14px;font-weight: 600;padding: 16px;">{{item_children.name}} 请求参数</div>
             <table  class="table-custom" >
            <thead >
                <tr >
                    <th >参数</th>
                    <th style="width: 45px;">默认值</th>
                    <th >说明</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(item ,item_index) in item_children.parmars" :key="item_index" v-show="item_children">
                    <td >{{item.name}}</td>
                    <td >{{item.default}}</td>
                    <td style="align-items: center;">
                        {{item.description}}
                        <a-tooltip placement="bottom"  v-show="item.tooltip">
                            <template slot="title">
                                <span>{{item.tooltip}}</span>
                            </template>
                            <a-icon type="question-circle" :style="{ color: '#194485',width: '32px;' }"/>
                        </a-tooltip>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>
        
    </div>
</div>
</template>
<script>
  export default {
      data() {
      return {
        title:'',
        sprops:{},
      }
    },
    mounted() {
        Bus.$off('show_services_prop').$on('show_services_prop', (props,title) => {
            this.sprops=props
            this.title=title
        })
    },
  }
</script>
<style>
.moon__title {
    font-size: 20px;
    font-weight: 400;
    color: #333;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #dddfe4;
}
.moon__img {
    text-align: center;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.moon__descriptionList {
    font-size: 14px;
    text-indent: 2em;
    line-height: 28px;
    text-align: justify;
}
.line-dotted {
    width: 100%;
    height: 0;
    margin: 20px 0;
    border-bottom: 1px dashed #dddfe4;
}
.new-content-title-wrapper {
    margin-bottom: 20px;
}
.new-content-title-wrapper .new-content-title {
    font-size: 16px;
    padding-bottom: 16px;
    color: #333;
    font-weight: 600;
}
.new-content-title-wrapper .new-content-line {
    width: 48px;
    height: 3px;
    background: #194485;
}
.table-custom {
    width: 100%;
    font-size: 14px;
    text-align: center;
    border: 1px solid #dddfe4;
    border-collapse: collapse;
    border-spacing: 0;
}
.table-custom td {
    vertical-align: middle;
    padding: 8px 6px;
    border: 1px solid #ddd;
}
.table-parameter pre {
    font-family: Consolas,Monaco,Andale Mono,monospace;
    line-height: 1.7em;
    overflow: auto;
    padding: 6px 10px;
    border-left: 5px solid #6ce26c;
    background-color: #f7f7f7;
    color: inherit;
    margin: 0;
    outline: none;
}
.table-parameter pre>code {
    font-family: Consolas,Monaco,Andale Mono,monospace;
    border: 0;
    display: inline;
    max-width: none;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: 1.6em;
    font-size: .95em;
    white-space: pre;
    background: 0 0;
    color: #666555;
    outline: none;
}
</style>